<template>
  <div class="app-container">
    <!-- 搜索框注释时，将height: calc(100vh - 84px - 50px);改为 height: calc(100vh - 84px); -->
    <el-form ref="queryFormRef" :model="query" :inline="true">
      <el-form-item label="viewlet名称">
        <el-input
          v-model="query.viewlet"
          placeholder="请输入viewlet"
          clearable
          @keyup.enter="getFineReport"
        />
      </el-form-item>
      <el-form-item label="是否展示工具栏">
        <el-select
          v-model="query.__showtoolbar__"
          placeholder="请选择是否展示工具栏"
          clearable
        >
          <el-option label="展示" :value="true" />
          <el-option label="隐藏" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getFineReport()"
          ><i-ep-search />搜索</el-button
        >
        <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
      </el-form-item>
    </el-form>
    <!-- iframe 模块-->
    <iframe
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
      scrolling="auto"
    ></iframe>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { encodeSearchParams } from "@/utils/index";

defineOptions({
  name: "FineReport",
  inheritAttrs: false,
});

// 定义iframe url参数
const host = import.meta.env.VITE_APP_FREPORT_HOST;
const url = ref("");
import request from "@/utils/request";

// 定义report传参
const query = reactive({
  viewlet: "用户查询.cpt",
  __showtoolbar__: false,
  ssoToken: "",
});

// 重置report参数
function resetQuery() {
  query.viewlet = "用户查询.cpt";
  query.__showtoolbar__ = false;
}

// 获取路由参数
onMounted(() => {
  getSsoToken();
});

async function getSsoToken() {
  try {
    const { data } = await request({
      url: `/system/fineReport/buildSsoToken`,
      method: "post",
      data: {
        userName: "admin",
      },
    });
    query.ssoToken = data;
    getFineReport();
  } catch (error) {
    alert("token获取失败，请重新尝试");
  }
}

// 生成 FineReport url 方法
function getFineReport() {
  const params = encodeSearchParams(query);
  console.log("params", params);
  params && (url.value = `${host}/decision/view/report?${params}`);
  console.log("url.value", url.value);
}
</script>

<style lang="scss" scoped>
/** 关闭tag标签  */
.app-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px - 50px);
}

/** 开启tag标签  */
.hasTagsView {
  .app-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    // height: calc(100vh - 页头height - 搜索框height);
    height: calc(100vh - 84px - 50px);

    iframe {
      background-color: #fff;
      box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
    }
  }
}
</style>
